<template>
    <div class="main el-box-init el-bkgd-white el-pd-20 el-dialog-1000">
        <h2 class="desc">关于我</h2>
        <div class="content">
            <Tinymce v-model="content" :config="{ height: 600 }" />
        </div>
        <div class="btn">
            <el-button type="primary" @click="onSubmit"> 确 认 </el-button>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, reactive, watch } from 'vue';
import tinymce from '../../../components/tinymce/tinymce.vue';
import { adminInfoMy as Api } from 'api';

export default {
    components: { tinymce },
    setup() {
        const { proxy } = getCurrentInstance();
        let content = ref('');
        let id = 1;

        // 获取详情
        const getById = async () => {
            const { code, data } = await proxy.$http.get(Api.getById, {
                params: { id }
            });

            if (code === 200) {
                content.value = data.info;
            }
        };
        // 提交表单
        const onSubmit = async () => {
            const { code, msg, data } = await proxy.$http.post(Api.update, {
                id,
                content: content.value
            });

            if (code === 200) {
                proxy.$msg.success(msg);
            } else {
                proxy.$msg.error(msg ? msg : data);
            }
        };

        getById();

        return {
            content,
            onSubmit
        };
    }
};
</script>

<style>
.main {
    margin: auto;
}
.desc {
    text-align: center;
    padding-bottom: 10px;
}
.btn {
    text-align: right;
    padding-top: 10px;
}
</style>
